<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="//litten.me">
  <title>Litten的博客</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
<meta property="og:type" content="website">
<meta property="og:title" content="Litten的博客">
<meta property="og:url" content="//litten.me/page/4/index.html">
<meta property="og:site_name" content="Litten的博客">
<meta property="og:description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Litten的博客">
<meta name="twitter:description" content="华中科技大学09级，就职于腾讯SNG。擅长各项前端技能，深入研究移动端开发与前端性能。非专业视觉设计师。此为博客一枚。">
  
    <link rel="alternative" href="/atom.xml" title="Litten的博客" type="application/atom+xml">
  
  
    <link rel="icon" href="/assets/img/favicon.ico">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="/assets/blogImg/litten.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Litten</a></h1>
		</hgroup>

		
		<p class="header-subtitle">胆小认生，不易相处</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/photos">相册</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
		        
					<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
		        
					<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Litten</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="/assets/blogImg/litten.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Litten</h1>
			</hgroup>
			
			<p class="header-subtitle">胆小认生，不易相处</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/photos">相册</a></li>
		        
		        
		        	<li><a href="/archives">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/litten" title="github"><i class="icon-github"></i></a>
			        
						<a class="weibo" target="_blank" href="http://weibo.com/litten225" title="weibo"><i class="icon-weibo"></i></a>
			        
						<a class="rss" target="_blank" href="/atom.xml" title="rss"><i class="icon-rss"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            
  
    <article id="post-guide-for-zb" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2015/02/21/guide-for-zb/">IT圈装逼速成指南</a>
    </h1>
  

        <a href="/2015/02/21/guide-for-zb/" class="archive-article-date">
  	<time datetime="2015-02-21T14:50:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2015-02-21</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>我有个朋友，春节回来了大家聚在一起，说自己买了iphone6但总觉得自己还是很low，问这是怎么回事？<br>其实生活过得怎样，跟iphone是两码事。先把生活过得充实了，切莫本末倒置。当然，我们可以就“IT圈如何愉快的装X”敞开心扉谈下这个问题。<br>以下几点仅供参考，实践时请注意预防雷劈。</p>
<p>##谈资类</p>
<p><strong>1、谈乔纳森。</strong><br>苹果设计师乔纳森。你要往死里黑他，但一定请记住，得是爱到深处自然黑那种黑。顺手拿过iphone6当惊堂木一拍（兄弟你得狠下这个心），当小伙伴因震惊不解而望着你时，你微微一笑，缓缓叹气：“彩虹山上的渐变爵士，身上却流着极简的血液…”</p>
<p><strong>2、谈亚马逊。</strong><br>要坚定保持亚马逊没啥黑点的观点不动摇。当别人说到界面和UI时，你整个人都要散发出一种“亚马逊的产品很牛的所以界面什么的并不重要”的气质。</p>
        <a class="article-more-a"  href="/2015/02/21/guide-for-zb/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活/">生活</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2015/02/21/guide-for-zb/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-douban-index-for-chrome" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/10/16/douban-index-for-chrome/">展示豆瓣未登录首页的chrome插件</a>
    </h1>
  

        <a href="/2014/10/16/douban-index-for-chrome/" class="archive-article-date">
  	<time datetime="2014-10-16T00:15:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-10-16</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>某天，我惊讶的发现，豆瓣未登陆时的首页，比登录后的首页还要好玩！<br>其实，并不是只有我一个人这么觉得，我甚至见过有人专门打开隐身窗口刷此页面，真是机智的少年。        </p>
<p>不是很理解之余，这个chrome插件<a href="https://chrome.google.com/webstore/detail/%E8%B1%86%E7%93%A3%E9%A6%96%E9%A1%B5/pkciaaffjliomglnmjcjekkinbnnjcah?hl=zh-CN">豆瓣首页 for chome</a>就诞生了。</p>
<p>但这个问题很有意思。<br>
        <a class="article-more-a"  href="/2014/10/16/douban-index-for-chrome/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/chrome/">chrome</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/工具/">工具</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/10/16/douban-index-for-chrome/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-history-of-browser-useragent2" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/10/05/history-of-browser-useragent2/">浏览器野史 UserAgent列传（下）</a>
    </h1>
  

        <a href="/2014/10/05/history-of-browser-useragent2/" class="archive-article-date">
  	<time datetime="2014-10-05T09:26:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-10-05</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="/assets/blogImg/browser-history2.jpg" alt="其实应该叫做浏览器约架史">    </p>
<p>前篇<a href="/2014/09/26/history-of-browser-useragent/">《浏览器野史 UserAgent列传（上）》</a></p>
<h3 id="六、师夷长技"><a href="#六、师夷长技" class="headerlink" title="六、师夷长技"></a>六、师夷长技</h3><p>前面说到，微软靠Windows系统捆绑IE销售。而Windows自然也有它的对手，Linux。一个技术快速发展的时代，系统的世界里也是战火纷飞。Linux系统自从有了可视化界面，也需要浏览器呀。桌面系统KDE的缔造者们就发明了一个。</p>
        <a class="article-more-a"  href="/2014/10/05/history-of-browser-useragent2/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/浏览器/">浏览器</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/10/05/history-of-browser-useragent2/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-history-of-browser-useragent" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/09/26/history-of-browser-useragent/">浏览器野史 UserAgent列传（上）</a>
    </h1>
  

        <a href="/2014/09/26/history-of-browser-useragent/" class="archive-article-date">
  	<time datetime="2014-09-26T03:26:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-09-26</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="/assets/blogImg/browser-history.jpg" alt="其实应该叫做浏览器约架史">   </p>
<p>某天，我做一个小项目，需要判断一下浏览器类型。简单的呀。<br>控制台敲下：<code>navigator.userAgent</code><br>浏览器回应：<code>Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36</code></p>
<p>天，这串是啥？你怎么连话都说不清楚？</p>
<p>我对userAgent并不陌生，但明明一个单词就可以说清楚的事情，却是这么掏心掏肺的回答。怪可怜的，一定有冤情。</p>
<p>后来我查阅了很多资料，发现历史非常的精彩。</p>
        <a class="article-more-a"  href="/2014/09/26/history-of-browser-useragent/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/web/">web</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/浏览器/">浏览器</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/09/26/history-of-browser-useragent/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-journey-to-yunnan" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/09/26/journey-to-yunnan/">还是丽江有意思</a>
    </h1>
  

        <a href="/2014/09/26/journey-to-yunnan/" class="archive-article-date">
  	<time datetime="2014-09-25T16:53:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-09-26</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><img src="/assets/blogImg/lijiang.jpg" alt="丽江古城">   </p>
<p>回来时给每个身边的好朋友都带了小礼物，最后却发现忘了给自己带。只有旅行时写的一些日记。蠢哭。</p>
<p>##无可救药</p>
<p>丽江这个地方，只要稍微给它写点文字，就会无一例外显得矫情。</p>
<p>天这么蓝，你不能不望。他们说，你看这天真他妈蓝。<br>吉他太动人，你不能不听。他们说，靠 ，大爷你NB。<br>酒喝得畅快，你不能不喝。他们笑着说，看你爽成那傻X样。</p>
<p>后来我终于明白：用粗俗的话去回避情感。因为这个地方，真是太TMD容易矫情了。<br>矫情是病，得治。荒诞又真实的人们认为，粗话是最温柔的良方！</p>
<p>只有在这说上几句，才觉得真实。这种感觉非常的微妙，就好像蜜糖太甜了，你必须去掺点无味的白水。又好比你与班上喜欢的一个姑娘相遇相视，她朝你微笑，你的眼神却飘忽云外。心如鹿撞，表现却一定得毫不在意。哥的心就是一块磐石，脸皮不重要，原则也不重要，重要的就是这不为所动的气场！老天才懂得解释这种诡异的现象。</p>
<p>结果白云悠悠，蓝天依旧。蜜糖还是甜。我们还是一群神经病。</p>
        <a class="article-more-a"  href="/2014/09/26/journey-to-yunnan/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活/">生活</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/09/26/journey-to-yunnan/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-hexo-theme-yilia" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/08/31/hexo-theme-yilia/">Hexo主题Yilia</a>
    </h1>
  

        <a href="/2014/08/31/hexo-theme-yilia/" class="archive-article-date">
  	<time datetime="2014-08-31T08:03:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-08-31</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><a href="https://github.com/litten/hexo-theme-yilia">hexo-theme-yilia</a> 是为 <a href="https://github.com/tommy351/hexo">hexo</a> 2.4+制作的主题。<br>响应式设计，风格简约。</p>
<p>终于从octopress迁移到hexo。Yilia是自己设计的主题，分享之，有爱请自取。关于主题：</p>
<ol>
<li>我喜欢简约。所以标签云，搜索框都拿掉了</li>
<li>接地气一点。所以用上了jiathis分享，友言评论，以及baidu的cdn</li>
<li>让大家把注意力放到内容上。这是本主题设计初衷</li>
<li>主题不支持IE6，7，8。以后也不会</li>
</ol>
        <a class="article-more-a"  href="/2014/08/31/hexo-theme-yilia/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/hexo/">hexo</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/主题/">主题</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/08/31/hexo-theme-yilia/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-two-magics-of-the-pilot" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/08/22/two-magics-of-the-pilot/">失眠故事三【飞行家的两个魔术】</a>
    </h1>
  

        <a href="/2014/08/22/two-magics-of-the-pilot/" class="archive-article-date">
  	<time datetime="2014-08-21T20:23:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-08-22</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>一个魔术，不足以让他成为魔术师。一个魔术，却让他成为了飞行家。</p>
<p>自家的木房建在悬崖边上，天堂与地狱相对望。飞行家说，住在这里，感觉自己像是传递天地信息的青鸟。<br>
        <a class="article-more-a"  href="/2014/08/22/two-magics-of-the-pilot/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/08/22/two-magics-of-the-pilot/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-three-drama" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2014/08/20/three-drama/">三台戏</a>
    </h1>
  

        <a href="/2014/08/20/three-drama/" class="archive-article-date">
  	<time datetime="2014-08-19T17:18:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2014-08-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>某天，我站在地铁口的一幅海报前。</p>
<p>巨大的国际象棋棋盘横据画面中心，棋盘微斜，偏移的角度恰好。纹理和刻痕显然是精心设计，至少要用掉三个图层。哑光效果也异常出色。除去文案，这是难得一见的好海报。</p>
<p>但这么多的细节，都是大脑正常运作时所认知到的。我的第一个想法，或者说是直觉，是看着这黑白的格子，就掏出了手机扫一扫…中毒至斯。</p>
<p>但我后来又想，这种“入戏太深”的场景和程序员这一职业不无关系…<br>
        <a class="article-more-a"  href="/2014/08/20/three-drama/#more">more >></a>
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/旧事/">旧事</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/生活/">生活</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2014/08/20/three-drama/#more">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
  
    <nav id="page-nav">
      <a class="extend prev" rel="prev" href="/page/3/">&laquo; Prev</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/">5</a><a class="page-number" href="/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><a class="extend next" rel="next" href="/page/5/">Next &raquo;</a>
    </nav>
  


          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Litten
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
  </div>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: true,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">js</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">html5</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">设计</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">杂谈</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">游戏</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旧事</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">coffeescript</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">web</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">旅行</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">css3</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">工具</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">chrome</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">生活</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">安全</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">黑科技</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">octopress</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">浏览器</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">主题</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">hexo</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">经验</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">产品</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">前端</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">github</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">药别停</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">模式</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">性能</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">Litten，&lt;br&gt;毕业于华科，就职于鹅厂&lt;br&gt;&lt;br&gt;热爱大海与冷笑话，&lt;br/&gt;目前是一枚前端&lt;br/&gt;&lt;br/&gt;胆小认生，不易相处，&lt;br&gt;年轻无为，卖马为生。</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>